<template>
  <div id="app">
    <transition name="slide">
      <Toast v-show="isshowToast"></Toast>
    </transition>
    <TopBar :key="num"></TopBar>
    <Header></Header>
    <router-view @fn="reloadTopBar" />
    <Footer></Footer>
    <Login v-show="isShowLoginMadal"></Login>
  </div>
</template>

<script>
import TopBar from "@/components/TopBar.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";
// import { jinpinAPI } from "../request/api"; //导入封装好的具体接口路径
import { mapState } from "vuex";
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    TopBar,
    Header,
    Footer,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowLoginMadal: (state) => state.isShowLogin.isShowLoginMadal,
      isshowToast: (state) => state.toastStatus.isshowToast,
    }),
  },
  watch: {
    "$route.path": {
      handler(newval, oldval) {
        if (newval !== oldval) {
          // console.log(newval, oldval);
          this.num++;
        }
      },
    },
  },
  methods: {
    reloadTopBar() {
      console.log("调用了app的函数");
      this.num++;
    },
  },
  // created() {
  //   // 直接调用
  //   jinpinAPI().then((res) => {
  //     console.log(res);
  //   });
  // },
};
</script>


<style lang="less">
.slide-enter,
.slide-leave-to {
  // 进场的初始状态
  top: -30px;
  opacity: 0;
}
.slide-enter-active,
.slide-enter-active {
  transition: all 0.4s;
}
.slide-enter-to,
.slide-leave {
  // 进场的最终状态
  top: 0;
  opacity: 1;
}
</style>
